<template>
  <div class="company-body new-logo">
    <div class="van-nav-bar__placeholder">
      <div class="nav-bar-tabs">
        <div class="van-nav-bar__content">
          <div class="van-nav-bar__left" @click="goBack">
            <van-icon name="arrow-left" class="van-nav-bar__arrow" />
          </div>
          <div class="nav-header">
            <!-- <span>同类职位推荐</span> -->
            <div
              class="nav-item"
              :class="[tabCurrent == 0 ? 'active' : '']"
              @click="tabChange(0)"
            >
              公司介绍
            </div>
            <div
              class="nav-item"
              :class="[tabCurrent == 1 ? 'active' : '']"
              @click="tabChange(1)"
            >
              在招职位
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公司信息 -->
    <div class="company-wrapper" v-show="tabCurrent == 0">
      <div class="info-card" v-if="companyInfo">
        <h2 class="title">{{ companyInfo.enName }}</h2>
        <div class="info-wrapper">
          <div class="info-item" v-if="companyInfo.enNature">
            <img src="../../assets/building.png" class="building" />
            <span>{{ companyInfo.enNature }}</span>
          </div>
          <div class="info-item" v-if="companyInfo.enPersonnel">
            <img src="../../assets/people.png" class="people" />
            <span>{{ companyInfo.enPersonnel }}</span>
          </div>
          <div class="info-item" v-if="companyInfo.enTrade_dictText">
            <img src="../../assets/gongzuojingyan.png" class="type" />
            <span>{{ companyInfo.enTrade_dictText }}</span>
          </div>
        </div>
        <div class="mark-wrapper">
          <div class="marker-item" v-if="companyInfo.workStart">
            {{ companyInfo.workStart }} - {{ companyInfo.workEnd }}
          </div>
          <div class="marker-item" v-if="companyInfo.rest">
            {{ companyInfo.rest }}
          </div>
          <div class="marker-item" v-if="companyInfo.workOvertime">
            {{ companyInfo.workOvertime }}
          </div>
          <div
            class="marker-item"
            v-for="(item, index) in companyInfo.otherWelfare"
          >
            {{ item }}
          </div>
        </div>
        <div class="position-wrapper" v-if="companyInfo.enLocation">
          <div class="position">
            <!-- <img src="../../assets/position.png" class="ico" /> -->
            <van-icon name="location" color="#0654ea" />
            <!-- <span>{{companyInfo.enAddress_dictText.replace(/,/g,'')+companyInfo.enLocation}}</span> -->
            <span>{{ companyInfo.enLocation }}</span>
          </div>
          <div class="navigation">
            <!-- <img src="../../assets/navigation.png" class="ico" /> -->
            <van-icon name="underway-o" class="ico" />
            <!-- <span>导航</span> -->
            <a
              :href="
                'https://uri.amap.com/marker?position=' +
                  companyInfo.lng +
                  ',' +
                  companyInfo.lat +
                  '&name=' +
                  companyInfo.enName
              "
              >导航</a
            >
          </div>
        </div>
      </div>
      <div class="card" v-if="companyInfo && companyInfo.introduce">
        <div class="title">公司简介</div>
        <div class="content">
          {{
            isOpen
              ? companyInfo.introduce
              : companyInfo.introduce.substr(0, 100) + "..."
          }}<span class="view" @click="toggleCon">{{
            isOpen ? "折叠" : "查看"
          }}</span>
        </div>
      </div>
      <div class="card" v-if="companyInfo && companyInfo.enPic_dictText.length">
        <div class="title">公司环境</div>
        <div class="slider">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
              v-for="(item, index) in companyInfo.enPic_dictText"
              :key="index"
              ><van-image :src="item" class="slider-item"
            /></van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 公司职位信息 -->
    <div class="company-wrapper list" v-show="tabCurrent == 1">
      <div class="van-nav-tabs__placeholder">
        <div class="van-nav-tabs">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="areaValue"
              ref="areaDrop"
              :title="areaTitle"
              :options="area"
              @change="
                (e) => {
                  filterChange(e, 'area');
                }
              "
              @click="filterClick"
              @closed="filterAction"
              @close="closeFilter"
            />
            <van-dropdown-item
              v-model="experienceValue"
              :title="experienceTitle"
              :options="experience"
              @change="
                (e) => {
                  filterChange(e, 'experience');
                }
              "
              @closed="filterAction"
              @close="closeFilter"
            />
            <van-dropdown-item
              v-model="salaryValue"
              :title="salaryTitle"
              :options="salary"
              @change="
                (e) => {
                  filterChange(e, 'salary');
                }
              "
              @closed="filterAction"
              @close="closeFilter"
            />
          </van-dropdown-menu>
        </div>
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="card"
            v-for="(item, index) in list"
            :key="item.id || index"
            @click="detail(item.id)"
          >
            <div class="top">
              <h2 class="title">{{ item.title || item.opJob.jobName }}</h2>
              <span class="salary" v-if="item.opJob">{{
                item.opJob.minMoney | salaryFilter(item.opJob.maxMoney)
              }}</span>
              <span class="salary" v-else>{{
                item.minMoney | salaryFilter(item.maxMoney)
              }}</span>
            </div>
            <p class="types">
              {{ item.jobCity_dictText || item.opJob.jobArea }}
              <span class="divider"></span>
              {{ item.eduLevel_dictText || edulevelFilter(item.opJob) }}
              <span class="divider"></span>
              {{
                item.opJob
                  ? experienceFilter(item.opJob)
                  : experienceFilter(item)
              }}
              <span class="divider"></span>
              {{ item.needCount || item.opJob.needCount }}人
            </p>
            <p class="compony" v-if="item.companyName">
              {{ item.companyName }}
            </p>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {
  Swipe,
  SwipeItem,
  Image,
  DropdownMenu,
  DropdownItem,
  List,
  PullRefresh,
  Divider,
} from "vant";
import { baseSo, myList, companyInfo, baseBlock, baseData } from "@/api/api";
export default {
  components: {
    vanSwipe: Swipe,
    vanSwipeItem: SwipeItem,
    VanImage: Image,
    vanDropdownMenu: DropdownMenu,
    vanDropdownItem: DropdownItem,
    vanList: List,
    vanPullRefresh: PullRefresh,
    divider: Divider,
  },
  filters: {
    salaryFilter(a, b) {
      if (a >= 1000) {
        return a / 1000 + "K" + "-" + b / 1000 + "K";
      } else {
        return a + "-" + b;
      }
    },
  },
  data() {
    return {
      tabCurrent: 0,
      areaTitle: "城市",
      experienceTitle: "经验",
      salaryTitle: "薪资",
      areaValue: "",
      experienceValue: "",
      salaryValue: "",
      area: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      experience: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      salary: [{ text: "全部商品", value: 0 }],
      allAreaData: [], //城市数据
      areaDataLevels: {
        province: [],
        city: [],
        district: [],
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
      },
      companyInfo: null,
      prams: {
        type: "job",
        "companyId.term": "",
      },
      id: "",
      isOpen: false, //公司详情是否展开，默认不展开
    };
  },
  watch: {
    area(e) {
      this.$refs.areaDrop.keepOpen = true;
      if (e[0].level == "city") {
        this.area.unshift(
          {
            text: "返回",
            value: -1,
          },
          {
            text: "全省",
            value: this.areaValue,
          }
        );
        this.areaDataLevels.city = e;
      } else if (e[0].level == "district") {
        this.area.unshift(
          {
            text: "返回",
            value: -2,
          },
          {
            text: "全市",
            value: this.areaValue,
          }
        );
        this.areaDataLevels.district = e;
        this.$refs.areaDrop.keepOpen = false;
      }
    },
  },
  methods: {
    toggleCon() {
      this.isOpen = !this.isOpen;
    },
    goBack() {
      this.$router.go(-1);
    },
    tabChange(index) {
      this.tabCurrent = index;
    },
    experienceFilter(e) {
      const experience = e.minExperience + "," + e.maxExperience;
      const res = this.$store.state.experience.find(
        (item) => item.value === experience
      );
      return res.label;
    },
    edulevelFilter(e) {
      const level = e.eduLevel + "";
      const res = this.$store.state.eduLevels.find(
        (item) => item.value === level
      );
      return res.label;
    },
    onLoad() {
      baseSo(Object.assign(this.prams, this.listQuery))
        .then((response) => {
          if (response.result.current == 1) this.list = response.result.records;
          else this.list = this.list.concat(response.result.records);
          if (response.result.current >= response.result.pages) {
            this.finished = true;
          } else {
            this.listQuery.pageNo++;
          }
        })
        .finally(() => {
          this.loading = false;
          this.refreshing = false;
        });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.listQuery.pageNo = 1;
      this.onLoad();
    },
    detail(id) {
      const token = this.$route.query.token;
      if (token) {
        this.$router.push({ path: "/top/details", query: { id, token } });
        return;
      }
      this.$router.push({ path: "/jobDetails", query: { id } });
    },
    getCompanyInfo() {
      companyInfo({ id: this.id }).then((response) => {
        const { result } = response;
        result.otherWelfare = result.otherWelfare
          ? result.otherWelfare.split(",")
          : [];
        result.enPic_dictText = result.enPic_dictText
          ? result.enPic_dictText.split(",")
          : [];
        this.companyInfo = result;
        // console.log(result.otherWelfare)
      });
    },
    getBlockData() {
      baseBlock({ code: "search" }).then((res) => {
        let data = res.result.children;
        let area = data.find((item) => item.name == "工作地点");
        area = area.blockData;
        let experience = data.find((item) => item.name == "工作经验");
        experience = experience.blockData;
        let salary = data.find((item) => item.name == "薪资范围");
        salary = salary.blockData;
        this.area = this.formatData(area, true, true);
        this.area.unshift({ text: "全部", value: 0 });
        this.areaDataLevels.province = this.area;
        this.experience = this.formatData(experience, true);
        this.experience.unshift({ text: "全部", value: 0 });
        this.salary = this.formatData(salary, true);
        this.salary.unshift({ text: "全部", value: 0 });
      });
    },
    getBaseData() {
      baseData({ clz: "area" }).then((res) => {
        this.allAreaData = res.result;
      });
    },
    // 筛选条件点击 地区
    filterClick(e) {
      console.log("----------");
      //点的是第三层的全市
      let current = this.area.find((item) => item.value == e);
      console.log(current);
      if (
        current.text == "全市" ||
        current.text == "全省" ||
        current.text == "全部" ||
        (current.level && current.level == "district")
      ) {
        console.log("----------");
        this.$refs.areaDrop.showPopup = false;
        return;
      }
    },
    //筛选条件发生变化
    filterChange(e, type) {
      console.log(e);
      this[type + "Value"] = e;
      if (type == "area") {
        //选择的是地区
        let data =
          e > 0 ? this.getNowAreaData(this.areaValue, this.allAreaData) : null;
        if (data) {
          this.area = this.formatData(data);
        }
        if (!data && e > 0) {
          this.$refs.areaDrop.showPopup = false;
        }
        if (e == -1) {
          //显示省的数据
          this.area = this.areaDataLevels.province;
        } else if (e == -2) {
          //显示市的数据
          this.area = this.areaDataLevels.city;
        }
      }
    },
    filterAction() {
      console.log(this.areaValue, this.experienceValue, this.salaryValue);
      let prams = this.prams;
      try {
        delete prams["jobCounty.term"];
        delete prams["jobProvince.term"];
        delete prams["jobCity.term"];
        delete prams["experience.range"];
        delete prams["money.range"];
      } catch (e) {
        //TODO handle the exception
      }
      if (this.areaValue) {
        let current = this.area.find((item) => item.value == this.areaValue);
        const { level, text } = current;
        if (level == "district") prams["jobCounty.term"] = this.areaValue;
        if (text == "全省") prams["jobProvince.term"] = this.areaValue;
        if (text == "全市") prams["jobCity.term"] = this.areaValue;
      }
      if (this.experienceValue) {
        prams["experience.range"] = this.experienceValue;
      }
      if (this.salaryValue) {
        prams["money.range"] = this.salaryValue;
      }

      this.onRefresh();
    },
    closeFilter(e) {
      // jobCounty.term: 120103
      if (this.area.length == 3 && this.area[1].text == "全省") {
        // 解决直辖市的bug
        this.$refs.areaDrop.toggle(true);
      }
    },
    getNowAreaData(e, arr) {
      let that = this,
        res;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].value == e) {
          res = arr[i].children;
          return res;
        } else if (arr[i].children) {
          const loopres = that.getNowAreaData(e, arr[i].children);
          if (loopres) {
            return loopres;
          }
        }
      }
    },
    formatData(arr, isFirstLevel = false, isProvince = false) {
      let resArr = [];
      arr.forEach((item) => {
        let obj = isFirstLevel
          ? { text: item.title, value: item.sourceId }
          : { text: item.label, value: item.value, level: item.level };
        isProvince ? Object.assign(obj, { level: "province" }) : null;
        resArr.push(obj);
      });
      return resArr;
    },
  },
  created() {
    this.id = this.$route.query && this.$route.query.id;
    this.prams["companyId.term"] = this.id;
    this.onLoad();
    this.getCompanyInfo();
    this.getBlockData();
    this.getBaseData();
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/mixin.scss";
.company-body {
  min-height: 100vh;
  .company-wrapper {
    padding-top: 16px;
    padding-bottom: 40px;
    &.list {
      padding-top: 0;
      margin-top: -16px;
      .card {
        padding: 30px;
        background: #fff;
        border-radius: 15px;
        margin: 16px 30px 0px 30px;
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .title {
            font-size: 32px;
            font-weight: 600;
            flex: 1 1 auto;
            display: block;
            @include text-ellipsis;
          }
          .salary {
            font-size: 30px;
            color: #fe3d09;
            flex: 0 0 auto;
            margin-left: 20px;
          }
        }
        .types {
          display: flex;
          font-size: 24px;
          align-items: center;
          margin-top: 25px;
          .divider {
            display: block;
            width: 1px;
            height: 24px;
            margin: 0 15px;
            background: #e2e2e2;
          }
        }
        .compony {
          margin-top: 25px;
          font-size: 24px;
          color: #999;
        }
      }
    }
    .info-card {
      padding: 30px;
      border-radius: 15px;
      background: #fff;
      margin: 0 30px 16px 30px;
      .title {
        font-size: 36px;
        font-weight: 600;
        color: #000000;
        line-height: 33px;
        margin: 20px 0;
      }
      .info-wrapper {
        font-size: 24px;
        color: #333;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: -10px;
        .info-item {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          line-height: 34px;
          margin-right: 30px;
          margin-bottom: 10px;
          .building {
            width: 20px;
            height: 24px;
            margin-right: 10px;
          }
          .people {
            width: 24px;
            height: 21px;
            margin-right: 10px;
          }
          .type {
            width: 27px;
            height: 24px;
            margin-right: 10px;
          }
        }
      }
      .mark-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        .marker-item {
          background: #f8f8fa;
          border-radius: 4px;
          height: 52px;
          padding: 0 17px;
          font-size: 24px;
          color: #656565;
          line-height: 52px;
          margin-right: 16px;
          margin-top: 15px;
        }
      }
      .position-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 30px;
        border-top: 1px solid #eeeeee;
        margin-top: 30px;
        .position {
          font-size: 24px;
          color: #333;
          display: flex;
          align-items: center;
          flex: 1 1 auto;
          margin-right: 20px;
          .ico {
            width: 21px;
            height: 26px;
            margin-right: 10px;
          }
        }
        .navigation {
          font-size: 24px;
          color: #e54437;
          display: flex;
          align-items: center;
          flex: 0 0 auto;
          .ico {
            width: 29px;
            // height: 29px;
            // margin-right: 10px;
          }
        }
      }
    }
    .card {
      margin: 0 30px 16px 30px;
      border-radius: 15px;
      background: #fff;
      padding-top: 20px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .title {
        padding: 20px 30px;
        font-size: 30px;
        font-weight: 500;
        color: #000000;
        line-height: 33px;
        position: relative;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          width: 4px;
          height: 27px;
          background: #e54437;
        }
      }
      .content {
        padding: 30px;
        padding-top: 0;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
        line-height: 48px;
        .view {
          color: #e54437;
        }
      }
      .slider {
        padding: 30px;
        padding-top: 10px;
        .my-swipe .van-swipe-item {
          .slider-item,
          .slider-item img {
            width: 100%;
          }
        }
        ::v-deep.van-swipe__indicators {
          bottom: 15px;
          .van-swipe__indicator {
            background: #bbbbbb;
          }
          .van-swipe__indicator--active {
            background: #e54437 !important;
          }
        }
      }
    }
  }
}
.van-nav-tabs__placeholder {
  height: 40px;
  .van-nav-tabs {
    position: fixed;
    top: 46px;
    left: 0;
    width: 100%;
    z-index: 99;
    ::v-deep .van-dropdown-menu {
      width: 100%;
      .van-dropdown-menu__bar {
        background: #f6f6f8;
        box-shadow: none;
        height: 40px;
        .van-dropdown-menu__title {
          font-size: 13px;
        }
      }
      .van-dropdown-menu__title--active,
      .van-dropdown-item__option--active {
        color: #e54437;
      }
    }
  }
}
.van-nav-bar__placeholder {
  height: 46px;
  .nav-bar-tabs {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 22px;
    text-align: center;
    background-color: #fff;
    .van-nav-bar__content {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      height: 46px;
      .van-nav-bar__left,
      .van-nav-bar__right {
        position: absolute;
        top: 0;
        bottom: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 0 16px;
        font-size: 14px;
        cursor: pointer;
        .van-nav-bar__arrow {
          margin-right: 4px;
          font-size: 16px;
          color: #333;
          font-weight: bold;
        }
      }
      .nav-header {
        max-width: 60%;
        margin: 0 auto;
        color: #323233;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        .nav-item {
          margin-left: 65px;
          position: relative;
          height: 46px;
          display: flex;
          align-items: center;
          transition: all ease-in 0.3s;
          &.active {
            color: #e54437;
            &:after {
              position: absolute;
              content: "";
              width: 100%;
              height: 2px;
              left: 0;
              background: #e54437;
              bottom: 0;
            }
          }
          &:first-of-type {
            margin-left: 0;
          }
        }
      }
    }
  }
}
</style>
